import * as React from 'react';
import { View, Image, TouchableOpacity, StyleSheet, Text } from 'react-native';

// import { exp } from 'react-native/Libraries/Animated/src/Easing';

const SettingListCommon = ({ navigation, listInfo, index }) => {
    let uurl = listInfo.url || 'Home';

    const [itemState, setItemState] = React.useState(listInfo.stateActive);
    console.log('itemstate');
    console.log(itemState);

    const styles = StyleSheet.create({
        container: {
            flexDirection: 'row',
            alignItems: 'center',
            fontWeight: '900',
            marginBottom: 25,
        },
        title: {
            fontWeight: 'bold',
            marginLeft: 15,
        },
        icon: {
            position: 'absolute',
            right: 15,
            fontSize: 12,
            fontWeight: '700',
        },
        stateText: {
            position: 'absolute',
            right: 30,
            color: 'rgb(153, 153, 153)',
        },
        stateBtn: {
            width: 48,
            height: 22,
            backgroundColor: 'black',
            borderRadius: 11,
            position: 'absolute',
            right: 20,
            backgroundColor: 'black',
        },
        stateBtnCir: {
            width: 20,
            height: 20,
            borderRadius: 20,
            backgroundColor: 'white',
            position: 'absolute',
            right: 0,
            top: 1,
        },
    });

    return (
        <>
            <View style={[styles.container]}>
                <Image source={listInfo.icon} />
                <Text style={styles.title}>{listInfo.title}</Text>
                <Text style={listInfo.state ? styles.stateText : { width: 0 }}>{listInfo.state}</Text>
                <Text style={listInfo.stateBtn ? { width: 0 } : styles.icon}>{`>`}</Text>

                {listInfo.stateBtn ? (
                    <View style={[styles.stateBtn, !itemState && { backgroundColor: 'rgb(221, 221, 221)' }]}>
                        <View style={[styles.stateBtnCir, itemState ? { right: 1 } : { right: 26 }]}></View>
                        <Text
                            style={{ width: '100%', height: '100%', opacity: 1 }}
                            onPress={() => {
                                setItemState(!itemState);
                            }}
                        ></Text>
                    </View>
                ) : null}

                <TouchableOpacity
                    style={listInfo.stateBtn ? { width: 0 } : { width: '100%', height: '100%', opacity: 0 }}
                    onPress={() => {
                        navigation.navigate(uurl);
                    }}
                ></TouchableOpacity>
            </View>
        </>
    );
};

export default SettingListCommon;
